<template>
  <div>
    <h2>{{ title }}-我第一天学习Vue</h2>
    <div v-text="url"></div>
    <div v-html="url"></div>
    <h2>{{ person }}</h2>
    <h2 v-show="isShow">这是要显示或隐藏的内容</h2>

    <button @click="changeName">点击修改姓名-1</button>
    <button @click="changeValue2('李四',22)">点击修改相关信息-写死的参数</button>
    <button @click="changeValue1(userName,num)">点击修改信息-1</button>
    <button @click="changeValue2(userName,num)">点击修改信息-2</button>
    <button @click="show">控制显示与隐藏</button>
  </div>
</template>

<script setup lang="ts">
import{reactive,toRaw, toRefs} from 'vue';

let data=reactive({
    person:{
      name:'张三',
      age:20
    },
    title:'vue指令',
    url:'<a href="https://www.baidu.com/">点我跳转到百度</a>',
    userName:'莉莉',
    num:25,
    isShow:true
})

 let {person,title,url,userName,num,isShow}=toRefs(data)

//修改姓名
const changeName =()=>{
  person.value.name='李四'
}

//第一种
const changeValue1=(str:string,num:number)=>{
  person.value.age=num
  person.value.name=str
}

//第二种
const changeValue2=(str:any,num:any)=>{
  person.value.age=num
  person.value.name=str
}

const show=()=>{
  if(isShow.value==true){
    isShow.value=false;
  }else{
    isShow.value=true;
  }
}

</script>

<style scoped>

</style>